<template>
    <view class="tabs">
		 <!-- :style="{'backgroundImage':`url(${item.active?item.img2:item.img1})`}" -->
        <view v-for="item in arr" :key="item.floor" class="tab" @click="change(item.floor)"
		 @mouseenter="change2(item.floor)" @mouseleave="change3(item.floor)" :class="{'tabActive':item.active}">
			 <view :class="{'floor':true,'active':item.active}">{{item.floor+'F'}}</view>
        </view>
    </view>
</template>

<script>
    export default {
        data () {
            return {
                arr:[]
            }
        },
		props:['info'],
		created() {
			setTimeout(()=>{
				this.info.forEach(i=>{
					this.arr.push({
						id:i.id,
						floor:i.floor,
						active:false,
						flag:0,
					})
				})
			this.arr[0].active=true
			this.arr[0].flag=1
			},500)
		},
        methods:{
            change(floor){
                this.arr.forEach(i=>{
                    if(i.floor===floor){
                        i.active=true
                        i.flag=1
						console.log('$emit')
                        this.$bus.$emit('floor',i.floor)
                    }else{
                        i.active=false
                        i.flag=0
                    }
                })
            },
            change2(floor){
                this.arr.forEach(i=>{
                    if(i.floor===floor){
                        if(!i.active){
                            i.active=true
                        }
                    }
                })
            },
            change3(floor){
                this.arr.forEach(i=>{
                    if(i.floor===floor){
                        if(i.flag===0){
                            i.active=false
                        }
                    }
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
.tab{
    cursor: pointer;
    margin-bottom: 14px;
	width: 46px;
	height: 46px;
	// background: no-repeat;
	background: url(../../static/floor1.png) no-repeat center;
	background-size: 46px 46px;
	display: flex;
	justify-content: center;
	align-items: center;
	.floor{
		font-size: 14px;
		color: #1A6A7E;
	}
	.active{
		color: #3FE6FF;
	}
}
.tabActive{
	background: url(../../static/floor2.png) no-repeat center;
	background-size: 46px 46px;
}

</style>